<template>
    <div class = "City">
        <p>请选选择位置</p>
        <select v-model="prov">
            <option 
                v-for="(i,index) in Arr" 
                :key = "index"
                :value="i.name">
                {{ i.name }}
            </option>
        </select>
    <select v-model="city">
		<option 
            v-for="(j,index) in cityArr" 
            :key = "index"
            :value="j.name">
			{{ j.name }}
		</option>
	</select>
    <select 
        v-model="district" 
        >
		<option 
            v-for="(k,index) in districtArr" 
            :key = "index"
            :value="k.name">
			{{ k.name }}
		</option>
	</select>
    </div>
</template>

<script>
export default {
    data(){
        return{
            // 全部
            Arr:[],
            prov:"北京市",
            city:"北京市",
            district: '东城区',
            cityArr: [],
            // 县区
            districtArr: [],
        }
    },
    created(){
        this.City();
    },
    // mounted(){
    //     this.City();
    // },
    methods:{
        City(){
            this.$api.City("../../../static/json/city.json").then(res=>{
                this.Arr = res;
                // console.log(this.Arr)
                this.$nextTick(res=>{
                    this.getCity()
                    this.updateDistrict () 
                    // console.log(this.Arr)
                })
            })
                // console.log(this.Arr)
        },
        getCity(){
            console.log(this.Arr)
            for(var i = 0;i<this.Arr.length;i++){
                    // debugger
                    // console.log(this.Arr[i])
                    if(this.Arr[i].name== this.prov){
                        console.log(this.prov,this.Arr[i].name)
                        // 获取到市名
                        // console.log(this.Arr[i].cityList[0].name)
                        // 
                        console.log(this.Arr[i].cityList)
                        this.cityArr = this.Arr[i].cityList
                        // console.log(this.city);
                        // console.log(this.cityArr,1)
                        // console.log(this.Arr[i])
                        break;
                    }   
                }
                // console.log(this.cityArr)
                this.city = this.cityArr[0].name;
                // console.log(this.cityArr.cityList[0].areaList[0].name)
                // console.log(this.city)
                // console.log(this.prov)
        },
        updateDistrict () {
            for (var i = 0; i< this.cityArr.length;i++) {
                var obj = this.cityArr[i];
                if (obj.name == this.city) {
                    // console.log(obj.name)
                    // console.log(obj)
                    // console.log(1)
                    this.districtArr = obj.areaList;
                    // console.log(111,this.districtArr,111111111)
                    break;
                }
            }
            if(this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
                this.district = this.districtArr[1].name;
                // console.log(this.districtArr[1].name,111)
                // console.log(111)
            } 
            else {
                this.district = '';
                // console.log(222)
            }
        },
        beforeMount: function () {
            this.updateCity();
            this.updateDistrict();
            // console.log(this.city)
        },
    },
    watch: {
        prov() {
            // console.log(1)
            this.getCity();
            this.updateDistrict();
        },
        //     this.City();
        //     console(1)
        //     this.updateDistrict();
        // },
        city() {
            this.updateDistrict();
        }
    }
}

</script>
<style lang="scss" scoped>
    .City{
        padding:20px;
        width:100%;
        border-bottom:1px solid #eee;
        display: flex;
        p{
            margin-right:10px;
        }
        select{
            margin-right:5px;
        }
    }
    // .City{
    //     background:pink;
    //     select{
    //         width:400px;
    //         height:40px;
    //         background:red;
    //     }
    // }
</style>

